<template>
	<view class="register">
		<view class="register-head">
			<!-- 自定义状态栏高度 -->
			<view class="head-nav"></view>
			<view class="head-content">
				<view class="head-return" @click="navigateBack">
					<text class="iconfont iconback_light"></text>
					{{ registerHeadText }}
				</view>
				<view class="head-portrait" v-if="bindStorage"><image :src="userInfo.avatar ? $util.img(userInfo.avatar) : $util.img('upload/uniapp/default_head.png')"></image></view>
			</view>
		</view>

		<view class="register-body">
			<!--  #ifdefh5-->
			<!-- h5端注册 -->
			<block v-if="stepShow == 0">
				<!-- 手机号 -->
				<view class="form-input input-mobile" v-show="registerMode == 'mobile'" v-if="mobileIsUse">
					<text>+86</text>
					<input class="uni-input" type="number" maxlength="11" v-model="formData.mobile" placeholder="手机号登录仅限中国大陆用户" name="mobile" />
				</view>

				<!-- 账号 -->
				<view class="form-input" v-show="registerMode == 'account'">
					<input class="uni-input" type="text" maxlength="30" placeholder="请输入账号" v-model="formData.account" name="account" />
				</view>

				<view class="forget-section">
					<text @click="switchRegisterMode" v-show="mobileIsUse">{{ registerMode == 'mobile' ? '账号注册' : '手机号注册' }}</text>
				</view>

				<button type="primary" class="register-btn" @click="nextStep">下一步</button>
			</block>

			<block v-if="stepShow == 1">
				<!-- 手机号短信动态码 -->
				<view class="form-input align-type" v-show="registerMode == 'mobile'" v-if="mobileIsUse">
					<input class="uni-input" type="number" maxlength="6" v-model="formData.dynacode" placeholder="请输入动态码" name="dynacode" />
					<view class="dynacode ns-text-color" @click="sendDynaCode">{{ codeText }}</view>
				</view>

				<!-- 账号图形码 -->
				<view class="form-input align-type" v-show="registerMode == 'account'" v-if="vercodeIsUse">
					<input class="uni-input" type="number" maxlength="4" v-model="formData.vercode" placeholder="请输入验证码" name="vercode" />
					<view class="vercode"><imgcode width="80" height="22" ref="imgcode"></imgcode></view>
				</view>

				<view class="form-input"><input class="uni-input" type="text" maxlength="30" password="true" placeholder="请输入密码" v-model="formData.password" /></view>

				<view class="form-input"><input class="uni-input" type="text" maxlength="30" password="true" placeholder="请确认密码" v-model="formData.rePassword" /></view>

				<button type="primary" class="register-btn" @click="register">完成注册，并登录</button>
				<view class="register-tips">
					<text>点击注册即代表您已同意</text>
					<text @click="openPopup" class="ns-text-color">《注册协议》</text>
				</view>
				<view @touchmove.prevent.stop>
					<uni-popup ref="registerPopup" type="center" class="wap-floating">
						<view class="conten-box">
							<view class="title">{{ regisiterText.title }}</view>
							<view class="con"><rich-text :nodes="regisiterText.content"></rich-text></view>
						</view>
					</uni-popup>
				</view>
			</block>
			<!--endif-->

			<!--  #ifdef  MP -->
			<!-- 小程序 - 注册方式 -->
			<block v-if="registerMode == ''">
				<button v-if="mobileIsUse" type="primary" class="modify-operation" @click="mobileRegister">手机号注册</button>
				<view class="wxAccountRegister" @click="accountRegister">账号注册</view>
			</block>

			<!-- 小程序 - 手机号注册 -->
			<block v-if="registerMode == 'mobile' && mobileIsUse">
				<!-- 下一步 -->
				<block v-if="stepShow == 0">
					<view class="form-input input-mobile">
						<text>+86</text>
						<input class="uni-input" type="number" maxlength="11" v-model="formData.mobile" placeholder="手机号登录仅限中国大陆用户" name="mobile" />
					</view>
					<view class="forget-section">
						<text @click="switchRegisterMode" v-show="mobileIsUse">{{ registerMode == 'mobile' ? '账号注册' : '手机号注册' }}</text>
					</view>
					<button type="primary" class="register-btn" @click="authorizeStep">下一步</button>
				</block>

				<!-- 注册 -->
				<block v-if="stepShow == 1">
					<view class="form-input align-type">
						<input class="uni-input" type="number" maxlength="6" v-model="formData.dynacode" placeholder="请输入动态码" />
						<view class="dynacode ns-text-color" @click="sendDynaCode">{{ codeText }}</view>
					</view>

					<view class="form-input"><input class="uni-input" type="text" maxlength="30" password="true" placeholder="请输入密码" v-model="formData.password" /></view>

					<view class="form-input"><input class="uni-input" type="text" maxlength="30" password="true" placeholder="请确认密码" v-model="formData.rePassword" /></view>

					<button type="primary" class="register-btn" @click="wxRegister">完成注册，并登录</button>

					<view class="register-tips">
						<text>点击注册即代表您已同意</text>
						<text @click="openPopup" class="ns-text-color">《注册协议》</text>
					</view>
					<view @touchmove.prevent.stop>
						<uni-popup ref="registerPopup" type="center" class="wap-floating">
							<view class="conten-box">
								<view class="title">{{ regisiterText.title }}</view>
								<view class="con"><rich-text :nodes="regisiterText.content"></rich-text></view>
							</view>
						</uni-popup>
					</view>
				</block>
			</block>

			<!-- 小程序 - 账号注册 -->
			<block v-if="registerMode == 'account'">
				<block v-if="stepShow == 0">
					<view class="form-input"><input class="uni-input" type="text" maxlength="30" placeholder="请输入账号" v-model="formData.account" name="account" /></view>

					<view class="forget-section">
						<text @click="switchRegisterMode" v-show="mobileIsUse">{{ registerMode == 'mobile' ? '账号注册' : '手机号注册' }}</text>
					</view>

					<button type="primary" class="register-btn" @click="authorizeStep">下一步</button>
				</block>

				<block v-if="stepShow == 1">
					<view class="form-input"><input class="uni-input" type="text" maxlength="30" password="true" placeholder="请输入邀请码" v-model="formData.password" /></view>
					<view class="form-input"><input class="uni-input" type="text" maxlength="30" password="true" placeholder="请输入密码" v-model="formData.password" /></view>

					<view class="form-input"><input class="uni-input" type="text" maxlength="30" password="true" placeholder="请确认密码" v-model="formData.rePassword" /></view>

					<view class="form-input align-type">
						<input class="uni-input" type="number" maxlength="4" v-model="formData.vercode" placeholder="请输入验证码" />
						<view class="vercode"><imgcode width="80" height="22" ref="imgcode"></imgcode></view>
					</view>

					<button type="primary" class="register-btn" @click="wxRegister">完成注册，并登录</button>

					<view class="register-tips">
						<text>点击注册即代表您已同意</text>
						<text @click="openPopup" class="ns-text-color">《注册协议》</text>
					</view>
					<view @touchmove.prevent.stop>
						<uni-popup ref="registerPopup" type="center" class="wap-floating">
							<view class="conten-box">
								<view class="title">{{ regisiterText.title }}</view>
								<view class="con"><rich-text :nodes="regisiterText.content"></rich-text></view>
							</view>
						</uni-popup>
					</view>
				</block>
			</block>
			<!--  #endif -->
		</view>
	</view>
</template>

<script>
import imgcode from '../../../components/imgcode/imgcode.vue';
import http from 'common/js/http.js';
import validate from 'common/js/validate.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
let _self;

export default {
	components: {
		imgcode,
		uniPopup
	},
	data() {
		return {
			isAuthorize: 0, // 是否授权
			registerHeadText: '手机号注册',
			registerMode: 'mobile', //注册方式
			stepShow: 0,
			formData: {
				mobile: '',
				account: '',
				password: '',
				rePassword: '',
				vercode: '',
				dynacode: ''
			},
			seconds: 120,
			timer: null,
			codeText: '获取验证码',
			vercodeIsUse: 0,
			mobileIsUse: 0,
			regisiterText: {
				title: '',
				content: ''
			},
			config: {},
			currPage: '',
			isSub: false,
			isStep: false,
			isSecond: false,

			authorizePhone: '',
			userInfo: {
				avatar: '',
				nickname: ''
			},
			bindStorage: null,
			wxIsClickRegister: false
		};
	},
	onLoad(event) {
		this.getRegisiter();
	},
	methods: {
		/**
		 * 导航跳转
		 */
		navigateBack() {
			if (this.registerMode == 'onAuthorization' || this.registerMode == 'mobile' || this.registerMode == 'account') {
				if (this.stepShow == 1) {
					this.registerHeadText = this.registerMode == 'mobile' ? '手机号注册' : '账号注册';
					this.stepShow = 0;
					this.isStep = false;

					this.isSecond = false;
					this.seconds = 120;
					this.codeText = '获取验证码';
					clearInterval(this.timer);
					return;
				}

				this.registerHeadText = '';

				// // #ifdefH5
				this.$util.redirectTo('/pages/login/login/login', '', '', 'reLaunch');
				//endif

				// #ifdef  MP
				this.registerMode = '';
				// #endif
				return false;
			}

			this.$util.redirectTo('/pages/login/login/login', '', '', 'reLaunch');
		},

		/**
		 * 注册协议
		 */
		getRegisiter() {
			this.sendRequest({
				url: 'System.Login.registerAgreement',
				success: res => {
					if (res.data) {
						this.regisiterText = res.data;
					}
				}
			});
		},
		openPopup() {
			if (this.regisiterText) {
				this.$refs.registerPopup.open();
			}
		},

		/**
		 * 切换注册方式
		 */
		switchRegisterMode() {
			this.registerMode = this.registerMode == 'mobile' ? 'account' : 'mobile';
			this.registerHeadText = this.registerMode == 'mobile' ? '手机号注册' : '账号注册';
		},

		/**
		 * 刷新图形验证码
		 */
		getVertificationCode() {
			this.$refs.imgcode.refresh();
		},

		/**
		 * 发送动态码
		 */
		sendDynaCode() {
			if (this.isSecond) return;
			this.isSecond = true;

			if (this.seconds != 120) return;
			this.sendRequest({
				url: 'System.Send.sendDynamicCode',
				data: {
					account: this.formData.mobile,
					key: 'register_validate',
					type: 'sms'
				},
				success: res => {
					if (res.code == 0) {
						if (this.seconds == 120 && this.timer == null) {
							this.timer = setInterval(() => {
								this.seconds--;
								this.codeText = this.seconds + 'S';
							}, 1000);
						}
						uni.setStorageSync('register_validate_token', res.data.record_id);
					} else {
						this.isSecond = false;
						this.$util.showToast({ title: res.message });
					}
				}
			});
		},

		/**
		 * 未授权下一步
		 */
		nextStep() {
			if (this.vertify()) {
				if (this.isStep) return;
				this.isStep = true;

				this.stepShow = 1;
			}
		},

		/**
		 * 未授权注册
		 */
		register() {
			this.isStep = false;
			if (this.vertify()) {
				if (this.isSub) return;
				this.isSub = true;
				
				if (this.$util.isWeiXin() && this.bindStorage.openid != undefined && this.bindStorage.provider == 'weixinPublic'){
					var url = 'System.UniApp.register';
					var data = {
						mode: this.registerMode,
						provider: this.bindStorage.provider,
						openid: this.bindStorage.openid,
						account: _self.formData.account,
						avatar: this.userInfo.avatar,
						nickname: this.userInfo.nickname,
						password: _self.formData.password,
						code: _self.formData.dynacode,
						record_id: uni.getStorageSync('register_validate_token'),
						source_uid: uni.getStorageSync('source_uid')
					};
				} else {
					var url = this.registerMode == 'mobile' ? 'System.Login.mobileRegisterAPI' : 'System.Login.usernameRegister';
					var data = {
						username: _self.formData.account,
						password: _self.formData.password,
						account: _self.formData.mobile,
						code: _self.formData.dynacode,
						record_id: uni.getStorageSync('register_validate_token'),
						source_uid: uni.getStorageSync('source_uid')
					};
				}
				
				this.sendRequest({
					url: url,
					data: data,
					success: res => {
						if (res.data.code >= 0) {
							uni.setStorage({
								key: 'token',
								data: res.data.token
							});
							uni.removeStorage({ key: 'source_uid' });
							uni.removeStorage({ key: 'register_validate_token' });
							this.$util.redirectTo('/pages/member/index/index', {}, 'tabbar');
						} else {
							this.isSub = false;
							if (this.vercodeIsUse) {
								this.getVertificationCode();
							}
							this.$util.showToast({ title: res.data.message });
						}
					}
				});
			}
		},

		/**
		 * 未授权注册表单验证
		 */

		vertify() {
			let rule = [],
				regConfig = this.config.reg_config;
				
			if (this.stepShow == 0) {
				if (this.registerMode == 'mobile') {
					rule.push({ name: 'mobile', checkType: 'required', errorMsg: '请输入手机号' }, { name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号' });
				} else {
					rule.push({ name: 'account', checkType: 'required', errorMsg: '请输入用户名' });
				}
			} else if (this.stepShow == 1) {
				if (this.vercodeIsUse && this.registerMode == 'account') {
					rule.push({ name: 'vercode', checkType: 'required', errorMsg: '请输入验证码' });
					rule.push({
						name: 'vercode',
						checkType: 'custom',
						errorMsg: '验证码错误',
						validate: value => {
							return this.$refs.imgcode.checkCode(value);
						}
					});
				}

				rule.push({ name: 'password', checkType: 'required', errorMsg: '请输入密码' });
				if (regConfig.pwd_len > 0) {
					rule.push({ name: 'password', checkType: 'lengthMin', checkRule: regConfig.pwd_len, errorMsg: '密码长度不能小于' + regConfig.pwd_len + '位' });
				}
				if (regConfig.pwd_complexity != '') {
					let passwordErrorMsg = '密码需包含',
						reg = '';
					if (regConfig.pwd_complexity.indexOf('number') != -1) {
						reg += '(?=.*?[0-9])';
						passwordErrorMsg += '数字';
					}
					if (regConfig.pwd_complexity.indexOf('letter') != -1) {
						reg += '(?=.*?[a-z])';
						passwordErrorMsg += '、小写字母';
					}
					if (regConfig.pwd_complexity.indexOf('upper_case') != -1) {
						reg += '(?=.*?[A-Z])';
						passwordErrorMsg += '、大写字母';
					}
					if (regConfig.pwd_complexity.indexOf('symbol') != -1) {
						reg += '(?=.*?[#?!@$%^&*-])';
						passwordErrorMsg += '、特殊字符';
					}
					rule.push({ name: 'password', checkType: 'reg', checkRule: reg, errorMsg: passwordErrorMsg });
				}
				if (this.formData.password != this.formData.rePassword) {
					this.$util.showToast({ title: '两次密码不一致' });
					return false;
				}
				if (this.registerMode == 'mobile') {
					rule.push({ name: 'dynacode', checkType: 'required', errorMsg: '请输入动态码' });
				}
			}

			var checkRes = validate.check(this.formData, rule);
			if (checkRes) {
				return true;
			} else {
				this.$util.showToast({ title: validate.error });
				return false;
			}
		},

		/**
		 * 已授权获取小程序用户的基础信息
		 */
		getBindStorage() {
			uni.getStorage({
				key: 'bind_data',
				success: res => {
					this.bindStorage = res.data;
					if(res.data) this.getUserInfo();
				}
			});
		},
		getUserInfo() {
			// #ifdef H5
			if ((this.bindStorage.provider = 'weixinPublic')) {
				this.sendRequest({
					url: 'System.WchatPublic.getOauthMemberInfo',
					data: this.bindStorage,
					success: res => {
						if (res.errmsg == undefined) {
							this.userInfo.avatar = res.data.headimgurl;
							this.userInfo.nickname = res.data.nickname;
						} else {
							this.$util.showToast({ title: res.errmsg });
							setTimeout(() => {
								this.$util.redirectTo('/pages/member/index/index', {}, 'tabbar');
							}, 1500);
						}
					}
				});
			}
			// #endif
			uni.getUserInfo({
				provider: this.bindStorage.provider,
				success: infoRes => {
					if (infoRes.errMsg == 'getUserInfo:ok') {
						switch (this.bindStorage.provider) {
							case 'weixin':
								this.userInfo.avatar = infoRes.userInfo.avatarUrl;
								this.userInfo.nickname = infoRes.userInfo.nickName;
								break;
						}
					} else {
						this.$util.showToast({ title: infoRes.errMsg });
						setTimeout(() => {
							this.$util.redirectTo('/pages/member/index/index', {}, 'tabbar');
						}, 1500);
					}
				}
			});
		},

		/**
		 * 已授权手机号注册
		 */
		mobileRegister() {
			this.registerHeadText = '手机号注册';
			this.registerMode = 'mobile';
		},

		/**
		 * 已授权账号注册
		 */
		accountRegister() {
			this.registerHeadText = '账号注册';
			this.registerMode = 'account';
		},

		/**
		 * 已授权下一步
		 */
		authorizeStep() {
			if (!this.wxVertify()) return;

			if (this.isStep) return;
			this.isStep = true;

			this.stepShow = 1;
		},

		/**
		 * 已授权注册
		 */
		wxRegister() {
			this.isStep = false;
			this.wxIsClickRegister = true;
			if (!this.wxVertify()) return;
			this.wxIsClickRegister = false;

			if (this.isSub) return;
			this.isSub = true;

			let authMode = '',
				account = '',
				password = '',
				code = '',
				record = '';

			//手机号注册
			if (this.registerMode == 'mobile') {
				authMode = 'mobile';
				account = this.formData.mobile;
				password = this.formData.password;
				code = this.formData.dynacode;
				record = uni.getStorageSync('register_validate_token');
			}

			//账号注册
			if (this.registerMode == 'account') {
				authMode = 'account';
				account = this.formData.account;
				password = this.formData.password;
			}

			this.sendRequest({
				url: 'System.UniApp.register',
				data: {
					mode: authMode,
					provider: this.bindStorage.provider,
					openid: this.bindStorage.openid,
					account: account,
					avatar: this.userInfo.avatar,
					nickname: this.userInfo.nickname,
					password: password,
					code: code,
					record_id: record,
					source_uid: uni.getStorageSync('source_uid')
				},
				success: res => {
					if (res.code == 0) {
						uni.setStorage({
							key: 'token',
							data: res.data.token
						});
						uni.removeStorage({ key: 'source_uid' });
						uni.removeStorage({ key: 'register_validate_token' });
						this.$util.redirectTo('/pages/member/index/index', {}, 'tabbar');
					} else {
						this.isSub = false;
						if (this.vercodeIsUse && this.registerMode == 'account') {
							this.getVertificationCode();
						}
						this.$util.showToast({ title: res.message });
					}
				}
			});
		},
		/**
		 * 已授权登录表单验证
		 */
		wxVertify() {
			let rule = [],
				checkRes = '';

			if (this.registerMode == 'mobile') {
				rule.push({ name: 'mobile', checkType: 'required', errorMsg: '请输入手机号' });
				rule.push({ name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号' });

				if (this.wxIsClickRegister) {
					rule.push({ name: 'dynacode', checkType: 'required', errorMsg: '请输入动态码' });

					var regConfig = this.config.reg_config;

					rule.push({ name: 'password', checkType: 'required', errorMsg: '请输入密码' });

					if (regConfig.pwd_len > 0) {
						rule.push({ name: 'password', checkType: 'lengthMin', checkRule: regConfig.pwd_len, errorMsg: '密码长度不能小于' + regConfig.pwd_len + '位' });
					}
					if (regConfig.pwd_complexity != '') {
						var passwordErrorMsg = '密码需包含';
						var reg = '';
						if (regConfig.pwd_complexity.indexOf('number') != -1) {
							reg += '(?=.*?[0-9])';
							passwordErrorMsg += '数字';
						}
						if (regConfig.pwd_complexity.indexOf('letter') != -1) {
							reg += '(?=.*?[a-z])';
							passwordErrorMsg += '、小写字母';
						}
						if (regConfig.pwd_complexity.indexOf('upper_case') != -1) {
							reg += '(?=.*?[A-Z])';
							passwordErrorMsg += '、大写字母';
						}
						if (regConfig.pwd_complexity.indexOf('symbol') != -1) {
							reg += '(?=.*?[#?!@$%^&*-])';
							passwordErrorMsg += '、特殊字符';
						}
						rule.push({ name: 'password', checkType: 'reg', checkRule: reg, errorMsg: passwordErrorMsg });
					}
				}
				if (this.formData.password != this.formData.rePassword) {
					this.$util.showToast({ title: '两次密码不一致' });
					return false;
				}
			}

			if (this.registerMode == 'account') {
				rule.push({ name: 'account', checkType: 'required', errorMsg: '请输入账号' });
				if (this.wxIsClickRegister) {
					var regConfig = this.config.reg_config;

					rule.push({ name: 'password', checkType: 'required', errorMsg: '请输入密码' });

					if (regConfig.pwd_len > 0) {
						rule.push({ name: 'password', checkType: 'lengthMin', checkRule: regConfig.pwd_len, errorMsg: '密码长度不能小于' + regConfig.pwd_len + '位' });
					}
					if (regConfig.pwd_complexity != '') {
						var passwordErrorMsg = '密码需包含';
						var reg = '';
						if (regConfig.pwd_complexity.indexOf('number') != -1) {
							reg += '(?=.*?[0-9])';
							passwordErrorMsg += '数字';
						}
						if (regConfig.pwd_complexity.indexOf('letter') != -1) {
							reg += '(?=.*?[a-z])';
							passwordErrorMsg += '、小写字母';
						}
						if (regConfig.pwd_complexity.indexOf('upper_case') != -1) {
							reg += '(?=.*?[A-Z])';
							passwordErrorMsg += '、大写字母';
						}
						if (regConfig.pwd_complexity.indexOf('symbol') != -1) {
							reg += '(?=.*?[#?!@$%^&*-])';
							passwordErrorMsg += '、特殊字符';
						}
						rule.push({ name: 'password', checkType: 'reg', checkRule: reg, errorMsg: passwordErrorMsg });
					}
					if (this.formData.password != this.formData.rePassword) {
						this.$util.showToast({ title: '两次密码不一致' });
						return false;
					}

					if (this.vercodeIsUse) {
						rule.push({ name: 'vercode', checkType: 'required', errorMsg: '请输入验证码' });
						rule.push({
							name: 'vercode',
							checkType: 'custom',
							errorMsg: '验证码错误',
							validate: value => {
								return this.$refs.imgcode.checkCode(value);
							}
						});
					}
				}
			}

			checkRes = validate.check(this.formData, rule);
			if (checkRes) {
				return true;
			} else {
				this.isSub = false;
				this.wxIsClickRegister = false;
				this.$util.showToast({ title: validate.error });
				return false;
			}
		}
	},
	watch: {
		seconds(value) {
			if (value == 0) {
				this.isSecond = false;
				this.seconds = 120;
				this.codeText = '获取验证码';
				clearInterval(this.timer);
			}
		}
	},
	onShow() {
		_self = this;
		let pages = getCurrentPages();
		this.currPage = pages[pages.length - 1].route;

		/**
		 * 获取注册配置信息
		 */
		this.sendRequest({
			url: 'System.Login.registerConfig',
			success: res => {
				this.config = res.data;
				this.mobileIsUse = res.data.reg_config.mobile_config.is_use;
				this.vercodeIsUse = res.data.code_config.value.pc == 1;
				// #ifdef  H5
				this.registerMode = this.mobileIsUse == 0 ? 'account' : 'mobile';
				// #endif

				// #ifdef  MP
				this.registerMode = '';
				// #endif
			}
		});
		
		this.getBindStorage();
		
		/**
		 * 获取用户的微信基本信息
		 */
		//#ifdef  MP
		this.registerHeadText = '注册';
		// #endif
	},

	onUnload() {
		uni.removeStorageSync('imgcode/' + this.currPage);
		this.isSub = false;
		this.isSecond = false;
		this.seconds = 120;
		this.codeText = '获取验证码';
		clearInterval(this.timer);
	},
	mixins: [http]
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.register-head {
	/* 自定义导航 */
	.head-nav {
		width: 100%;
		height: var(--status-bar-height);
	}
	.head-content {
		position: relative;
		width: 750rpx;
		height: 540rpx;
		background: $base-color url(../../../static/images/authorize_bj.png) no-repeat;
		background-size: contain;
		.head-return {
			padding-left: 30rpx;
			height: 90rpx;
			line-height: 90rpx;
			color: #fff;
			font-size: $ns-font-size-lg;
			text {
				display: inline-block;
				margin-right: 10rpx;
			}
		}
		.head-portrait {
			overflow: hidden;
			position: absolute;
			bottom: 28rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			border: 4rpx solid #fff;
			image {
				width: 120rpx;
				height: 120rpx;
			}
		}
	}
}

.register-body {
	padding: 100rpx 80rpx 0;
	.form-input {
		margin-top: 60rpx;
		height: 60rpx;
		border-bottom: 2rpx solid $ns-bg-color-gray;
		input {
			font-size: $ns-font-size-base;
			padding: 0;
		}
	}
	.input-mobile {
		position: relative;
		text {
			&:after {
				content: '';
				position: absolute;
				left: 56rpx;
				bottom: 24rpx;
				border: 2rpx solid transparent;
				border-top-color: #333;
				border-left-color: #333;
				width: 12rpx;
				height: 12rpx;
				display: block;
				transform: rotate(-135deg);
			}
			position: absolute;
			top: -4rpx;
			left: 0;
		}
		input {
			padding: 0 0 0 90rpx;
		}
	}
	.register-btn {
		margin-top: 60rpx;
	}
	button {
		margin: 0;
		border-radius: 40rpx;
		margin-bottom: 30rpx;
		color: #fff;
	}
	.forget-section {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		margin-top: 10rpx;
		height: 70rpx;
		line-height: 70rpx;
	}
	.register-tips {
		margin-top: 20rpx;
		font-size: $ns-font-size-sm;
		text-align: center;
	}
	.register-tips navigator {
		display: inline;
	}
	.wxAccountRegister {
		font-size: $ns-font-size-lg;
		text-align: center;
	}
}

/* 注册协议 */
.conten-box {
	padding: 0 $ns-padding $ns-padding;
	.title {
		line-height: 100rpx;
		font-size: $ns-font-size-lg + 4rpx;
		font-weight: bold;
		color: $base-color;
		border-bottom: 2rpx solid $ns-border-color-gray;
		margin-bottom: $ns-margin;
	}
	.con {
		width: 100%;
		min-height: 600rpx;
		overflow-y: scroll;
		text-align: left;
		text-indent: 50rpx;
	}
}

.align-type {
	display: flex;
	justify-content: space-between;
}
</style>
<style scoped>
.wap-floating >>> .uni-popup__wrapper-box {
	width: 80%;
	border-radius: 20rpx;
}
</style>
